<template>
  <div class="dog">
     <img src="./gz.gif" alt="">
     <p :style="{backgroundColor: mycolor}" @click="show" >{{name}}</p>
   </div>
</template>
 
<script>
export default {
    name: 'MyDog',
  components: {},
  props: {
    name:{
      type: String,
    }
  },
  data() {
    return {
      mycolor:''
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    show(){
      this.mycolor = `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)}`
      this.$emit("xiugou",this.name)
    }
  }
};
</script>

<style scoped>
  .dog {
  width: 200px;
  border: 2px solid black;
  text-align: center;
  float: left;
}

 img {
  width: 100%;
  height: 200px;
}
</style>